let oBox = document.getElementsByClassName("move-picture")[0];
let omvBtnsLeft = document.getElementById("move-picture-left");
let omvBtnsRight = document.getElementById("move-picture-right");
let numbb = document.getElementsByClassName("move-picture1")[0].children
window.onload = function() {
    leave();

    oBox.onmouseover = function() {
        stay()
    };
    oBox.onmouseout = function() {
        leave()
    };
    omvBtnsLeft.onclick = function() {
        zuo(index - 1)
    }
    omvBtnsRight.onclick = function() {
        DT(index + 1)
    }

}
let index = 0;
let oImgs = document.getElementsByClassName("move-picture1")[0].children
let time = null;

function leave() {
    if (time != null) {
        clearInterval(time)
    }
    time = setInterval(function() {
        DT(index + 1)
    }, 1500)
}

function stay() {
    if (time == null) {
        return;
    }
    window.clearInterval(time);
    time = null
}

function fadeInOut(inImg, outImg, timeLong) {
    let timeSpace = 10;
    let step = 1 / (timeLong / timeSpace);
    let opacity = 0;
    let time = setInterval(() => {
        opacity += step;
        if (opacity >= 1) {
            opacity = 1;
            window.clearInterval(time);
        }
        inImg.style.opacity = opacity;
        outImg.style.opacity = 1 - opacity;
    }, timeSpace);
}

function DT(showIndex) {
    let oldInex = index;
    index = showIndex;
    if (index > 3) {
        index = 0;
    } else if (index < 0) {
        index = 3;
    };
    fadeInOut(oImgs[index], oImgs[oldInex], 500);
    oImgs[oldInex].style.zIndex = 1;
    oImgs[index].style.zIndex = 2;
}

function zuo(showIndex) {
    let oldInex = index;
    index = showIndex;
    if (index > 3) {
        index = 0;
    } else if (index < 0) {
        index = 3;
    };
    fadeInOut(oImgs[index], oImgs[oldInex], 500);
    oImgs[oldInex].style.zIndex = 2;
    oImgs[index].style.zIndex = 1;
}